﻿@{
    ViewBag.Title = "新增地址";
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>新增地址</title>
    <link href="~/Content/Style/gobal.css" rel="stylesheet" type="text/css">
    <link href="~/Content/Style/add_address.css" rel="stylesheet" type="text/css">
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>

    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    @*jqueryAlert提示框*@
    <link href="~/Content/alert/css/alert.css" rel="stylesheet" />
    <script src="~/Content/alert/js/alert.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
    <div id="app">
        <form id="addfrmRegist" class="form-horizontal">
            <div class="pay_away">
                <div class="cont">
                    <div class="server">
                        <div class="cont">
                            <div class="title">
                                <p class="name1">姓名</p>
                                <span class="pice1">
                                    <input class="input_style" name="Name" id="Name" type="text" placeholder="输入姓名">
                                </span>
                                <div class="clearfix"></div>
                            </div>

                            <div class="title">
                                <p class="name1">电话</p>
                                <span class="pice1">
                                    <input class="input_style" name="TelNum" id="TelNum" type="text" placeholder="输入电话" maxlength="11" v-on:change="PhoneCheck()">
                                </span>
                                <div class="clearfix"></div>
                            </div>

                            <div class="title" style="border:none;">
                                <p class="name1">区域</p>
                                @*<div>
                                    <template>
                                        <el-select v-model="value" placeholder="请选择" style="width: 80%;padding: 5px 0;" v-on:change="handleChangeTwo()">
                                            <el-option :key="One" :label="name" :value="One"></el-option>
                                        </el-select>
                                    </template>
                                </div>
                                <div class="clearfix"></div>*@
                            </div>
                            <div>
                                <template>
                                    <el-select v-model="value1" placeholder="请选择" style="width: 100%;padding: 5px 0;" v-on:change="handleChangeThree()">
                                        <el-option v-for="item in Twodata"
                                                   :key="item.DistrictID"
                                                   :label="item.DistrictName"
                                                   :value="item.DistrictID">
                                        </el-option>
                                    </el-select>
                                </template>
                            </div>
                            <div class="clearfix"></div>
                            <div>
                                <template>
                                    <el-select v-model="value2" placeholder="请选择" style="width: 100%;padding: 5px 0;" v-on:change="handleChangeDistrict()">
                                        <el-option v-for="item in Threedata"
                                                   :key="item.DistrictID"
                                                   :label="item.DistrictName"
                                                   :value="item.DistrictID">
                                        </el-option>
                                    </el-select>
                                </template>
                                <div class="clearfix"></div>
                            </div>
                            <div>
                                <span class="pice1" style="width:100%;">
                                    <input class="input_style" style="border:1px solid #dcdfe6;text-align: center;" name="ContactDistrict" id="ContactDistrict" type="text" placeholder="请选择地址区域" readonly>
                                </span>
                            </div>
                            <div class="clearfix"></div>

                            <div class="title1">
                                <p class="name1">地址</p>
                                <span class="pice1">
                                    <input class="input_style" name="AddrContent" id="AddrContent" type="text" placeholder="请输入详细地址">
                                </span>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <input class="tijiao" type="button" id="btnAddSubmit" value="保存" v-on:click="AddressSubmit()">
            </div>
        </form>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    Twodata: [],
                    Threedata: [],
                    One: '000',
                    //value: '',
                    //name: '',
                    value1: '',
                    value2: '',
                    shopnumber: '',
                    IsAdd: '',
                };
            },
            created() {
                var _this = this;
                var GetRequest = new GetRequest();
                function GetRequest() {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                }
                _this.shopnumber = GetRequest.shopnumber;
                _this.IsAdd = GetRequest.IsAdd;
                this.handleChangeTwo();
            },
            methods: {
                PhoneCheck: function PhoneCheck() {
                    var reg = /^1(3|4|5|7|8|9)\d{9}$/; //验证规则
                    var phoneNum = $("#TelNum").val();
                    var flag = reg.test(phoneNum);
                    if (flag == false) {
                        jqueryAlert({
                            'content': '电话号码格式不正确！'
                        });
                        $("#TelNum").val("");
                    }
                },
                handleChangeTwo: function handleChangeTwo() {
                    var _this = this;
                    $.ajax({
                        url: "/Information/Get_User_DistrictsTwoByDistrictID",
                        type: "POST",
                        dataType: "json",
                        data: { DistrictID: _this.One },
                        success: function (result) {
                            if (result.BS == 1) {
                                //console.log(result);
                                vm.Twodata = result.rows;
                            }
                        }
                    });
                },
                handleChangeThree: function handleChangeThree() {
                    var _this = this;
                    vm.value2 = '';
                    vm.Threedata = [];
                    $.ajax({
                        url: "/Information/Get_User_DistrictsThreeByDistrictID",
                        type: "POST",
                        dataType: "json",
                        async: false,
                        data: { DistrictID: _this.value1 },
                        success: function (result) {
                            if (result.BS == 1) {
                                //console.log(result);
                                vm.Threedata = result.rows;
                            }
                        }
                    });
                    this.handleChangeDistrict();
                },
                handleChangeDistrict: function handleChangeDistrict() {
                    var _this = this;
                    //console.log(_this.value);
                    //console.log(_this.value1);
                    //console.log(_this.value2);
                    let obj1 = {};
                    obj1 = this.Twodata.find((item) => {         //这里的Twodata就是上面遍历的数据源
                        return item.DistrictID === _this.value1;        //筛选出匹配数据
                    });
                    var DistrictNamevalue2 = '';
                    //console.log(_this.name);
                    //console.log(obj1.DistrictName);
                    //console.log(obj2.DistrictName);
                    if (_this.value2 != "" && _this.value2 != null) {
                        let obj2 = {};
                        obj2 = this.Threedata.find((item) => {         //这里的Threedata就是上面遍历的数据源
                            return item.DistrictID === _this.value2;        //筛选出匹配数据
                        });
                        DistrictNamevalue2 = obj2.DistrictName;
                        $("#ContactDistrict").val(obj1.DistrictName + "-" + DistrictNamevalue2);
                        return;
                    }
                    else {
                        $("#ContactDistrict").val(obj1.DistrictName);
                    }
                },
                AddressSubmit: function AddressSubmit() {
                    var _this = this;
                    if ($("#Name").val() == "" || $("#Name").val() == null) {
                        jqueryAlert({
                            'content': '姓名不能为空！'
                        });
                    }
                    else if ($("#TelNum").val() == "" || $("#TelNum").val() == null) {
                        jqueryAlert({
                            'content': '电话不能为空！'
                        });
                    }
                    else if (_this.value1 == "" || _this.value1 == null) {
                        jqueryAlert({
                            'content': '请选择一个区域！'
                        });
                    }
                    else if (_this.value2 == "" || _this.value2 == null) {
                        jqueryAlert({
                            'content': '请确保区域选择正确！'
                        });
                    }
                    else if ($("#ContactDistrict").val() == "" || $("#ContactDistrict").val() == null) {
                        jqueryAlert({
                            'content': '请选择一个完整的区域！'
                        });
                    }
                    else if ($("#AddrContent").val() == "" || $("#AddrContent").val() == null) {
                        jqueryAlert({
                            'content': '详细地址不能为空！'
                        });
                    }
                    else {
                        //console.log($("#Name").val());
                        //console.log($("#TelNum").val());
                        //console.log($("#ContactDistrict").val());
                        //console.log($("#AddrContent").val());
                        //console.log(_this.value1);
                        //console.log(_this.value2);

                        var DistrictIDValue = '';
                        if (_this.value2 == "" || _this.value2 == null) {
                            DistrictIDValue = _this.value1;
                        } else {
                            DistrictIDValue = _this.value2;
                        }
                        $.ajax({
                            url: "/Information/UpdateUserSendAddr",
                            type: "Post",
                            dataType: 'json',
                            data: {
                                "Name": $("#Name").val(),
                                "TelNum": $("#TelNum").val(),
                                "ContactDistrict": $("#ContactDistrict").val(),
                                "AddrContent": $("#AddrContent").val(),
                                "DistrictID": DistrictIDValue,
                                "tag": 1
                            },
                            success: function (result) {
                                //console.log(result);
                                //console.log(_this.shopnumber);
                                if (result == '1') {
                                    if (_this.shopnumber != "" && _this.IsAdd == 1) {
                                        window.location.href = "/Order/Index?isAdd=1&shopnumber=" + _this.shopnumber;
                                    }
                                    else {
                                        window.location.href = "/Information/Address?shopnumber=" + _this.shopnumber;
                                    }
                                }
                                else {
                                    jqueryAlert({
                                        'content': result
                                    })
                                }
                            }
                        });
                    }
                },
            }
        })
    </script>
</body>
</html>
